<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>微信导航栏</title>
    <style type="text/css">
        /* 设置导航栏 */
        .con {
            height: 50px;
            /* 设置导航栏渐变色 */
            background-image: linear-gradient(#454545, #181818);
        }

        /* 设置图片左浮动 */
        img {
            float: left;
            height: 30px;
            margin: 10px;
        }

        /* 设置菜单栏右浮动 */
        ul {
            float: right;
            margin: 0;
        }

        /* 调整菜单栏 */
        ul > li {
            list-style-type: none;
            display: inline-block;
            /* 保证文字居中，只需要行高等于容器高度 */
            line-height: 50px;
            margin: 0;
        }

        /* 选中菜单栏显示圆角 */
        li > a {
            padding-left: 15px;
            line-height: 33px;
            height: 33px;
            display: inline-block;
        }

        /* 修改文字颜色 */
        span {
            color: white;
            line-height: 33px;
            height: 33px;
            display: inline-block;
            padding-right: 15px;
        }

        /* 选中菜单栏显示左半边背景 */
        li > a:hover {
            background-image: url("./../lib/images/nav.png");
        }

        /* 选中菜单显示右半边背景 */
        li > a:hover span {
            background-image: url("./../lib/images/nav.png");
            /* 图片右对齐 */
            background-position: right;
        }
    </style>
</head>
<body>
<div class="con">
    <img src="./../lib/images/weixin.png" alt="微信导航栏">
    <ul>
        <li><a href=""><span>首页</span></a></li>
        <li><a href=""><span>微信下载</span></a></li>
        <li><a href=""><span>微信支付</span></a></li>
        <li><a href=""><span>公众号</span></a></li>
        <li><a href=""><span>小程序</span></a></li>
        <li><a href=""><span>帮助与反馈</span></a></li>
        <li><a href=""><span>表情开放平台</span></a></li>
    </ul>
</div>
</body>
</html>